<template>
  <div class="user">
    <van-nav-bar title="我的收款码" left-arrow @click-left="backUp"></van-nav-bar>
    <h2>体验会员收款码</h2>
    <div class="user-avatar">
      <input
        :style="{ backgroundImage: info.experienceQRcode?'':'url(../../assets/upload-bg.png)'}"
        id="experienceQRcode"
        class="upload"
        type="file"
        name="image"
        accept="image/*"
        @change="uploadExperienceQRcode"
      />
      <img :src="info.experienceQRcode" alt />
    </div>
    <h2>天使会员收款码</h2>
    <div class="user-avatar">
      <input
        :style="{ backgroundImage: info.angelQRcode?'':'url(../../assets/upload-bg.png)'}"
        id="angelQRcode"
        class="upload"
        type="file"
        name="image"
        accept="image/*"
        @change="uploadAngelQRcode"
      />
      <img :src="info.angelQRcode" alt />
    </div>
  </div>
</template>
<script>
import url_java from "@/utils/api_data";
import axios from "axios";

export default {
  data() {
    return {
      info: {}
    };
  },
  mounted() {
    this.getMe();
  },
  methods: {
    getMe() {
      this.$axios({
        method: "get",
        url: url_java.memberInfo,
        params: {
          token: localStorage.getItem("token")
        }
      }).then(res => {
        console.log(res);
        this.info = res;
      });
    },
    uploadExperienceQRcode() {
      let file = document.getElementById("experienceQRcode").files[0];
      console.log(file);
      let formData = new FormData();
      formData.append("imageFile", file);
      const instance = axios.create({
        withCredentials: true
      });
      instance
        .post("http://mcity.asrobot.cn/api/image/upload.json", formData)
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.updateExperienceQRcode(res.data.data);
          }
        });
    },
    updateExperienceQRcode(imageUrl) {
      this.$axios({
        method: "post",
        url: url_java.updateExperienceQRcode,
        params: {
          token: localStorage.getItem("token"),
          imageUrl: imageUrl
        }
      }).then(res => {
        this.getMe();
      });
    },
    uploadAngelQRcode() {
      let file = document.getElementById("angelQRcode").files[0];
      console.log(file);
      let formData = new FormData();
      formData.append("imageFile", file);
      const instance = axios.create({
        withCredentials: true
      });
      instance
        .post("http://mcity.asrobot.cn/api/image/upload.json", formData)
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.updateAngelQRcode(res.data.data);
          }
        });
    },
    updateAngelQRcode(imageUrl) {
      this.$axios({
        method: "post",
        url: url_java.updateAngelQRcode,
        params: {
          token: localStorage.getItem("token"),
          imageUrl: imageUrl
        }
      }).then(res => {
        this.getMe();
      });
    },
    backUp() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
@import "~style/user.less";
h2 {
  margin: 20px;
  .font-dpr(14px);
  text-align: center;
}
.user-avatar {
  box-sizing: border-box;
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  font-size: 0;
  line-height: 0;
  position: relative;
  // overflow: hidden;
  .upload {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
    background-size: cover;
    border: 1px solid #ccc;
  }
  img {
    width: 100%;
    height: 100%;
    z-index: 9;
  }
}
</style>
